<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-rose-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'pie',
      legendData: []
    }
  },

  computed: {

  },

  methods: {
    setSeries () {
      let length = this.data.length
      this.series = []
      // this.legendData = []
      // let sdata = []
      // for (let i = 1; i < length; i++) {
      //   // if (i > 0) {
      //   this.legendData.push(this.data[i][0])
      //   sdata.push({
      //     value: this.data[i][1],
      //     name: this.data[i][0]
      //   })
      //   // }
      // }
      this.series.push({
        type: this.chartType,
        radius: [this.innerRadius, this.radiusLength],
        avoidLabelOverlap: true,
        center: this.piecenter ? this.piecenter.split(',') : ['50%', '50%'],
        startAngle: this.startAngle,
        label: {
          show: this.showLabel,
          fontSize: this.labelFontSize,
          position: this.positionLabel,
          formatter: this.formatterLabel,
          // formatter: '{b}\n{c}\n{d}%',
          // padding: [-24, 0, 0, 0]
        },
        roseType: 'radius',
        // data: sdata
      })
    }
  },

  watch: {
    startAngle () {
      this.setSeries()
    },
    positionLabel () {
      this.setSeries()
    },
    formatterLabel () {
      this.setSeries()
    },
    innerRadius () {
      this.setSeries()
    },
    radiusLength () {
      this.setSeries()
    },
    labelFontSize () {
      this.setSeries()
    },
    piecenter () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
